<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/static/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="/static/layuimini/css/public.css" media="all">
<style>
    .top-panel {border:1px solid #eceff9;border-radius:5px;text-align:center;}
    .top-panel > .layui-card-body {height:60px;}
    .top-panel-number {line-height:60px;font-size:30px;border-right:1px solid #eceff9;}
    .top-panel-tips {line-height:30px;font-size:12px}
</style>
</head>
<body>


<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">系统用户</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="top-panel-number">
                                {{user_count}}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">系统用户组</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="top-panel-number">
                                {{group_count}}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">资产主机</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="top-panel-number">
                                {{host_count}}
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">自愈配置项</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="top-panel-number">
                                {{ autorecovery_count }}
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div class="layui-col-xs12 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">监控配置项</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="top-panel-number">
                                {{ monitorconfig_count }}
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-xs12 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">报警自愈历史</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="top-panel-number">
                                {{ alerthistory_count }}
                            </div>

                        </div>
                    </div>
                </div>
            </div>


        </div>



        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md9">
                <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
            </div>
        </div>


    </div>
</div>

<script src="/static/layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/static/js/echarts.min.js" charset="utf-8"></script>

<script>

        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        var optionRecords = {
            title: {
                text: '系统指标'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                data: ["总用户", "总用户组", "总资产主机", "异常资产", "故障自愈", "监控中心"],
                type: 'category',
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'line',
                data: [{{ user_count }}, {{ group_count }}, {{ host_count }}, {{ host_error_count }}, {{ monitorconfig_count }}, {{ monitorconfig_count }}],
                itemStyle: {
                    normal: {
                        color: function(params) {

                            var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];
                                return colorList[params.dataIndex]
                        },
                        label: {
                            show: true
                        }
                    }

                }
            }]

        }
        echartsRecords.setOption(optionRecords);

</script>

                <table class="layui-table" lay-even="" lay-skin="nob">

                    <thead>
                    <tr>
                        <th>主机名</th>
                        <th>主机管理IP</th>
                        <th>连接状态</th>
                        <th>添加日期</th>
                        <th>刷新时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for server in server_list %}
                    <tr>
                        <td>{{ server.hostname }}</td>
                        <td>{{ server.ip_inner }}</td>
                        <td>{% if server.scan_status %}
                                            <span>连接正常</span>{% else %}
                                            <span>连接异常</span>{% endif %}</td>
                        <td>{{ server.create_date }}</td>
                        <td>{{ server.update_date }}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
</body>
</html>
